{% extends "base/base.html" %}

{% import "macro/display.html" as display %}

{% block earlyheadblock %}
  <link href="{{ STATIC_URL }}themes/compilation.css" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block headblock %}
  <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="{{ STATIC_URL }}js/compilation.js"></script>
{% endblock %}

{% block title %}{{ gettext("Add compilation") }}{% endblock %}

{% block main %}

<h2>{{ gettext("Cool stuff") }}</h2>
<p><form id="addsongform">
    <label for="songid">{{ gettext("Search song") }} : </label><input type="text" id="songid"/>
    <input type="submit" value="{{ gettext("Search") }}" id="addsongsubmit"/> <div id="errr" style="color:#f00;"></div>
    </form>
</p>

<div id="help">
{{ gettext("Hint : Drag... and drop!") }}
</div>
<div id="dragarea">
{{ gettext("Search result") }}
<ul id="sortsongsearchlist">
</ul>
<p>{{ gettext("Songs in compilation") }} (<span id="timelength">0:00:00</span>)</p>
<ol id="sortsonglist">
</ol>

</div>

<form id="compilationsubmitform" action="." method="post">

<h2>{{ gettext("Compilation info") }}</h2>
<input id="songsinput" name="songsinput" type="hidden" value="{{ songsinput }}"/>
<table>
    {{ compform }}
</table>
<input type="submit" value="{{ gettext("Save entry") }}"/>
</form>
{% endblock %}
